Play framework 2.0でCoffeeScriptを使う

#JavaScript

#Play Framework

中村修太

2011.10.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ソースのHEADを取得してセットアップ

CoffeeScriptのサポートは10月3日にコミットされたようなので、githubからソースを取得して自分でビルドする必要があります。
まずはgithubからplay2.0のソースを取得しましょう。

$ git clone https://github.com/playframework/Play20.git

これで現状のソースを取得できます。
githubにはビルド方法も記述してありますので、そのとおりにビルドしてみましょう。

$ cd Play20/framework
$ ./build
> build-repository

これで準備ができました。サンプルアプリケーションを作成してためしてみましょう。

サンプルアプリケーション作成

Play20/samplesの下に、coffeeという名前のディレクトリを作成しましょう。

$ cd Play20/samples
$ mkdir coffee
$ cd coffee
$ ../../play new

これでプロジェクトが作成されます。

そのうちデフォルトで対応すると思いますが、現時点では少し修正しなければいけません。
まずconf/routesファイルを修正します。

GET     /public/*file           controllers.Assets.at(path="/public", file)

上記記述箇所を下記のように修正してください。

GET     /assets/*file                   controllers.Assets.at(path="/public", file)

現在静的ファイルはpublicの下に配置されていますが、これは使用しないので削除してしまってください。

次にappディレクトリの下にassets/scriptsディレクトリとassets/stylesheetsディレクトリを作成します。
assets/scriptsディレクトリにtest.coffeeファイルを下記内容で作成してください。

root = exports ? this

root.hello = (name) ->
  alert name

CoffeeScriptでhello関数を定義します。単純に、アラートで渡された文字列を表示するだけです。
次にCSSをlessで作成します。assets/stylesheetsディレクトリに_fn.lessファイルを作成します。

a {
    color: red;
}

もう一つファイルを作成します。assets/stylesheetsディレクトリにstyles.lessファイル作成します。

@import "_fn.less";

@nice-blue: #5B83AD;

h1 {
    color: @nice-blue;
}

最後にapp/views/index.scala.htmlを編集します。

@(name:String)
<html>
    <head>
        <title>Home</title>
        <link rel="shortcut icon" type="image/png" href="http://www.playframework.org/public/images/favicon.png">
        <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/styles.css")"> 
        <script src="@routes.Assets.at("scripts/test.js")" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>@name</h1>
        <input type='button' value='push' onclick='hello("@name")'/>
    </body>
</html>

assetsディレクトリ内容を読み込んでいます。
ボタンを押すとtest.coffeeがコンパイルされた結果のjsファイルに定義されているhello関数を呼び出しています。

では実行してみましょう。

$ cd samples/coffee
$ ../../play
> run

localhost:9000にアクセスし、ボタンを押すと、test.coffeeで定義した関数によってアラートが表示されます。
ブラウザ上のソースと確認してみると、scriptタグは下記のようにjsファイルへのリンクへ変換されています。

<script src="/assets/scripts/test.js" type="text/javascript" charset="utf-8"></script>

test.jsの内容は下記のようになっています。

(function() {
  var root;
  root = typeof exports !== "undefined" && exports !== null ? exports : this;
  root.hello = function(name) {
    return alert(name);
  };
}).call(this);

test.coffeeが自動でコンパイルされ、jsファイルに変換されているのがわかります。